import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Row, Col } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

class Content3 extends React.PureComponent {
  render() {
    return (
      <div className="home-page-wrapper content3-wrapper">
        <div className="home-page content3">
          <div className="title-wrapper">
            <h1 className="title-h1">蚂蚁金融云提供专业的服务</h1>
            <div className="title-content">基于阿里云强大的基础资源</div>
          </div>
          <OverPack playScale={0.3}>
            <QueueAnim key="u" type="bottom">
              <Row key="row" className="content3-block-wrapper">
                {/* Block 0 */}
                <TweenOne
                  component={Col}
                  animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 0 }}
                  key="block0"
                  className="content3-block"
                  componentProps={{ md: 8, xs: 24 }}
                >
                  <TweenOne
                    animation={{
                      x: '-=10',
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    key="img0"
                    className="content3-icon"
                  >
                    <img src="/images/ScHBSdwpTkAHZkJ.png" width="100%" alt="img" />
                  </TweenOne>
                  <div className="content3-text">
                    <TweenOne
                      key="h2-0"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 100 }}
                      component="h2"
                      className="content3-title"
                    >
                      企业资源管理
                    </TweenOne>
                    <TweenOne
                      key="p-0"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 200 }}
                      component="div"
                      className="content3-content"
                    >
                      云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。
                    </TweenOne>
                  </div>
                </TweenOne>
                
                {/* Block 1 */}
                <TweenOne
                  component={Col}
                  animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 100 }}
                  key="block1"
                  className="content3-block"
                  componentProps={{ md: 8, xs: 24 }}
                >
                  <TweenOne
                    animation={{
                      x: '-=10',
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    key="img1"
                    className="content3-icon"
                  >
                    <img src="/images/NKBELAOuuKbofDD.png" width="100%" alt="img" />
                  </TweenOne>
                  <div className="content3-text">
                    <TweenOne
                      key="h2-1"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 200 }}
                      component="h2"
                      className="content3-title"
                    >
                      云安全
                    </TweenOne>
                    <TweenOne
                      key="p-1"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 300 }}
                      component="div"
                      className="content3-content"
                    >
                      按金融企业安全要求打造的完整云上安全体系，全方位保障金融应用及数据安全。
                    </TweenOne>
                  </div>
                </TweenOne>
                
                {/* Block 2 */}
                <TweenOne
                  component={Col}
                  animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 200 }}
                  key="block2"
                  className="content3-block clear-both"
                  componentProps={{ md: 8, xs: 24 }}
                >
                  <TweenOne
                    animation={{
                      x: '-=10',
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    key="img2"
                    className="content3-icon"
                  >
                    <img src="/images/xMSBjgxBhKfyMWX.png" width="100%" alt="img" />
                  </TweenOne>
                  <div className="content3-text">
                    <TweenOne
                      key="h2-2"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 300 }}
                      component="h2"
                      className="content3-title"
                    >
                      云监控
                    </TweenOne>
                    <TweenOne
                      key="p-2"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 400 }}
                      component="div"
                      className="content3-content"
                    >
                      分布式云环境集中监控，统一资源及应用状态视图，智能分析及故障定位。
                    </TweenOne>
                  </div>
                </TweenOne>
                
                {/* Block 3 */}
                <TweenOne
                  component={Col}
                  animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 0 }}
                  key="block3"
                  className="content3-block"
                  componentProps={{ md: 8, xs: 24 }}
                >
                  <TweenOne
                    animation={{
                      x: '-=10',
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    key="img3"
                    className="content3-icon"
                  >
                    <img src="/images/MNdlBNhmDBLuzqp.png" width="100%" alt="img" />
                  </TweenOne>
                  <div className="content3-text">
                    <TweenOne
                      key="h2-3"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 100 }}
                      component="h2"
                      className="content3-title"
                    >
                      移动
                    </TweenOne>
                    <TweenOne
                      key="p-3"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 200 }}
                      component="div"
                      className="content3-content"
                    >
                      一站式移动金融APP开发及全面监控；丰富可用组件，动态发布和故障热修复。
                    </TweenOne>
                  </div>
                </TweenOne>
                
                {/* Block 4 */}
                <TweenOne
                  component={Col}
                  animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 100 }}
                  key="block4"
                  className="content3-block"
                  componentProps={{ md: 8, xs: 24 }}
                >
                  <TweenOne
                    animation={{
                      x: '-=10',
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    key="img4"
                    className="content3-icon"
                  >
                    <img src="/images/UsUmoBRyLvkIQeO.png" width="100%" alt="img" />
                  </TweenOne>
                  <div className="content3-text">
                    <TweenOne
                      key="h2-4"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 200 }}
                      component="h2"
                      className="content3-title"
                    >
                      分布式中间件
                    </TweenOne>
                    <TweenOne
                      key="p-4"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 300 }}
                      component="div"
                      className="content3-content"
                    >
                      金融级联机交易处理中间件，大规模分布式计算机，数万笔/秒级并发能力，严格保证交易数据统一性。
                    </TweenOne>
                  </div>
                </TweenOne>
                
                {/* Block 5 */}
                <TweenOne
                  component={Col}
                  animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 200 }}
                  key="block5"
                  className="content3-block clear-both"
                  componentProps={{ md: 8, xs: 24 }}
                >
                  <TweenOne
                    animation={{
                      x: '-=10',
                      opacity: 0,
                      type: 'from',
                      ease: 'easeOutQuad',
                    }}
                    key="img5"
                    className="content3-icon"
                  >
                    <img src="/images/ipwaQLBLflRfUrg.png" width="100%" alt="img" />
                  </TweenOne>
                  <div className="content3-text">
                    <TweenOne
                      key="h2-5"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 300 }}
                      component="h2"
                      className="content3-title"
                    >
                      大数据
                    </TweenOne>
                    <TweenOne
                      key="p-5"
                      animation={{ opacity: 0, type: 'from', ease: 'easeOutQuad', delay: 400 }}
                      component="div"
                      className="content3-content"
                    >
                      一站式、全周期大数据协同工作平台，PB级数据处理、毫秒级数据分析工具。
                    </TweenOne>
                  </div>
                </TweenOne>
              </Row>
            </QueueAnim>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default Content3;
